<template>
  <view>
    <view class="box_1">
      <view class="box_7">
          <view class="text-group_4">
            <text lines="1" class="paragraph_1">您好，<br/>欢迎来到速裁通</text>
            <text lines="1" class="text_1">区块链电子签约平台</text>
          </view>
        </view>
        <view class="text-wrapper_1">
          <text class="text_2" @click="toCode()">切换验证码登录</text>
        </view>
        <view class="box_8">
          <view class="group_2">
            <view class="image-text_3">
              <image src="../../static/ZH.png" class="label_3"></image>
            </view>
            <!-- input框-->
             <input class='zh' type="text" placeholder="账号" v-model="phone"/>
          </view>
        </view>
        <view class="box_9">
          <view class="group_3">
            <view class="image-text_4">
              <image src="../../static/MM.png" class="label_4"></image>
            </view>
            <!-- input框-->
             <input class='zh'  type="password" placeholder="密码" v-model="password"/>
          </view>
        </view>
        <view class="box_10">
          <view class="button_1">
            <text lines="1" decode="true" class="text_3" @click="login()">登&nbsp;录</text>
          </view>
        </view>
        <view class="text-wrapper_2">
          <text class="text_4" @click="toRegister()">忘记密码？</text>
        </view>
        <view class="box_11">
          <view class="box_4" :class="isAgreement?'or':''" @click="isAgreement=!isAgreement"></view>
          <text lines="1" class="text_5">本人已认真阅读，理解并同意《用户协议》和《隐私协议》</text>
        </view>
      </view>
  </view>
</template>

<script>
  import {checkMobile,checkPassword,checkCode} from "@/common/util/verify.js"
  export default {
    data() {
      return {
        isAgreement:true,//是否同意协议
        phone:'',//手机
        password:'',//密码
      };
    },
    methods: {
      toCode(){
        uni.redirectTo({
          url:"/subpkg/login_code/login_code"
        })
      },
      //去忘记密码
      toRegister(){
        uni.redirectTo({
          url:"/subpkg/login_register/login_register?modify=password"
        })
      },
      
      //登录
      async login(){
          //校验手机号
          let verifyResult=await checkMobile(this.phone)
          
          //校验密码
          let passwordResult=await checkPassword(this.password)
          
          if(!this.isAgreement){
            let title='是否同意协议!'
            uni.$showMsg(title)
          }else{
            if(!verifyResult&&!passwordResult){
              let title='账号密码错误!'
              uni.$showMsg(title)
            }else{
              let params={
                    username:this.phone,//手机号
                    password:this.password,//密码
                    platform:2
              }
              this.$store.dispatch('login/login',params)
              try{
                await this.$store.dispatch('login/login',params)
                let title ='登录中~'
                uni.$showMsg(title)
                uni.switchTab({
                  url:'/pages/home/home'
                })
              }catch(e){
                let title = e.message
                uni.$showMsg(title)
              }
            }
          }
      },
    }
  }
</script>

<style scoped>
  .or {
    background-color: rgba(205, 173, 102, 1.000000);
  }
.page {
  background-color: rgba(255,255,255,1.000000);
  position: relative;
  width: 750rpx;
  height: 1478rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.box_1 {
  height: 1478rpx;
  background: url(https://636c-cloud1-4ge04zyie85f8672-1311921377.tcb.qcloud.la/%E8%83%8C%E6%99%AF.png?sign=76002dd2ea34284bd676fc4105c78804&t=1659334514) 100% no-repeat;
  background-size: 100% 100%;
  width: 750rpx;
  display: flex;
  flex-direction: column;
}

.box_7 {
  width: 347rpx;
  height: 159rpx;
  display: flex;
  flex-direction: row;
  margin: 111rpx 0 0 89rpx;
}
.text-group_4 {
  width: 347rpx;
  height: 159rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.paragraph_1 {
  width: 347rpx;
  height: 118rpx;
  overflow-wrap: break-word;
  color: rgba(255,255,255,1);
  font-size: 48rpx;
  font-family: SimHei;
  text-align: left;
  line-height: 72rpx;
}
.text_1 {
  width: 213rpx;
  height: 23rpx;
  overflow-wrap: break-word;
  color: rgba(255,255,255,1);
  font-size: 24rpx;
  font-family: SimHei;
  text-align: left;
  white-space: nowrap;
  line-height: 24rpx;
  margin: 18rpx 0 0 2rpx;
}
.text-wrapper_1 {
  width: 152rpx;
  height: 22rpx;
  display: flex;
  flex-direction: row;
  margin: 79rpx 0 0 90rpx;
}
.text_2 {
  width: 152rpx;
  height: 22rpx;
  overflow-wrap: break-word;
  color: rgba(204,204,204,1);
  font-size: 22rpx;
  font-family: SimHei;
  text-align: right;
  white-space: nowrap;
  line-height: 22rpx;
}
.box_8 {
  width: 570rpx;
  height: 86rpx;
  display: flex;
  flex-direction: row;
  margin: 33rpx 0 0 90rpx;
}
.group_2 {
  background-color: rgba(255,255,255,1.000000);
  border-radius: 30rpx;
  width: 570rpx;
  height: 86rpx;
  display: flex;
  flex-direction: row;
}
.image-text_3 {
  width: 99rpx;
  height: 35rpx;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  margin: 27rpx 0 0 42rpx;
}
.label_3 {
  width: 35rpx;
  height: 35rpx;
}
.text-group_2 {
  width: 50rpx;
  height: 25rpx;
  overflow-wrap: break-word;
  color: rgba(191,191,191,1);
  font-size: 26rpx;
  font-family: SimHei;
  text-align: left;
  white-space: nowrap;
  line-height: 26rpx;
  margin-top: 7rpx;
}
.box_9 {
  width: 570rpx;
  height: 86rpx;
  display: flex;
  flex-direction: row;
  margin: 50rpx 0 0 90rpx;
}
.group_3 {
  background-color: rgba(255,255,255,1.000000);
  border-radius: 30rpx;
  width: 570rpx;
  height: 86rpx;
  display: flex;
  flex-direction: row;
}
.image-text_4 {
  width: 96rpx;
  height: 38rpx;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  margin: 23rpx 0 0 44rpx;
}
.label_4 {
  width: 32rpx;
  height: 38rpx;
}
.text-group_3 {
  width: 50rpx;
  height: 25rpx;
  overflow-wrap: break-word;
  color: rgba(191,191,191,1);
  font-size: 26rpx;
  font-family: SimHei;
  text-align: left;
  white-space: nowrap;
  line-height: 26rpx;
  margin-top: 6rpx;
}
.box_10 {
  width: 570rpx;
  height: 86rpx;
  display: flex;
  flex-direction: row;
  margin: 59rpx 0 0 89rpx;
}
.button_1 {
  background-color: rgba(196,176,129,1.000000);
  border-radius: 30rpx;
  height: 86rpx;
  display: flex;
  flex-direction: column;
  width: 570rpx;
}
.text_3 {
  width: 89rpx;
  height: 34rpx;
  webkit-text-stroke: 1px rgba(255,255,255,1);
  overflow-wrap: break-word;
  color: rgba(255,255,255,1);
  font-size: 36rpx;
  font-family: SimHei;
  text-align: center;
  white-space: nowrap;
  line-height: 36rpx;
  margin: 27rpx 0 0 241rpx;
}
.text-wrapper_2 {
  width: 98rpx;
  height: 21rpx;
  display: flex;
  flex-direction: row;
  margin: 37rpx 0 0 325rpx;
}
.text_4 {
  width: 98rpx;
  height: 21rpx;
  overflow-wrap: break-word;
  color: rgba(204,204,204,1);
  font-size: 22rpx;
  font-family: SimHei;
  text-align: left;
  white-space: nowrap;
  line-height: 22rpx;
}
.box_11 {
  width: 486rpx;
  height: 19rpx;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  margin-top: 107rpx;
  margin-left: 15%;
}
.box_4 {
  border: 1rpx solid rgba(255, 255, 255, 1);
  border-radius: 50%;
  width: 18rpx;
  height: 18rpx;
  display: flex;
  flex-direction: column;
}
.text_5 {
  width: 465rpx;
  height: 19rpx;
  overflow-wrap: break-word;
  color: rgba(204,204,204,1);
  font-size: 20rpx;
  font-family: SimHei;
  text-align: left;
  white-space: nowrap;
  line-height: 25rpx;
}
.zh{
  margin-left: -20rpx;
  margin-top: 20rpx;
  width: 550rpx;
}
.label-radio{
    transform:scale(0.4);
    display: flex;
     position: absolute;
     }
    
</style>
